* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; color: #222; background: linear-gradient(180deg, #fff 0%, #fdf2f8 100%), radial-gradient(12px 12px at 16px 16px, rgba(244, 163, 241, 0.18) 25%, transparent 26%); background-size: auto, 24px 24px; background-blend-mode: normal; }
header { padding: 12px 16px; border-bottom: none; background: linear-gradient(90deg, #60a5fa, #34d399); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
header h1 { margin: 0; font-size: 20px; color: #fff; }
.container { display: grid; grid-template-columns: 2fr 1.2fr; gap: 20px; padding: 16px; }
.image-pane { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.label-pane { background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%); border: 1px solid #93c5fd; border-radius: 12px; padding: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.image-container { display: flex; flex-direction: column; align-items: center; }
.image-container img { max-width: 60%; height: auto; border-radius: 16px; border: 3px dashed #93c5fd; background: #ffffffcc; padding: 8px; box-shadow: 0 8px 18px rgba(147, 197, 253, 0.25); }
.placeholder { width: 100%; padding: 24px; text-align: center; color: #6b7280; border: 1px dashed #cbd5e1; border-radius: 6px; }
.info { margin-top: 8px; font-size: 12px; color: #6b7280; }
.controls { margin-top: 12px; display: flex; gap: 12px; align-items: center; }
.controls button { padding: 10px 14px; border: 1px solid #fca5a5; background: #ffe4e6; border-radius: 999px; cursor: pointer; color: #b91c1c; box-shadow: 0 6px 12px rgba(248, 113, 113, 0.18); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.controls button:hover { transform: translateY(-1px); box-shadow: 0 8px 16px rgba(248, 113, 113, 0.28); }
.controls select { padding: 6px 8px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; }
.label-pane h2 { margin-top: 0; font-size: 18px; color: #374151; display: flex; align-items: center; gap: 8px; }
.label-pane h2::after { content: '🌈'; font-size: 18px; }
.label-row { padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fafafa; }
.label-image { margin-top: 16px; display: flex; justify-content: center; min-height: 220px; }
.label-caption { margin-top: 8px; text-align: center; font-size: 16px; color: #6b7280; }
.label-pane.status-stranger .label-caption { color: #b91c1c; }
.label-pane.status-family .label-caption { color: #065f46; }
.label-character-image { width: 240px; height: 240px; transition: all 0.3s ease; animation: fadeIn 0.5s; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.12)); border-radius: 12px; background: #f0f9ff; padding: 12px; border: 2px solid #60a5fa; }

/* 状态主题：陌生人/家人 */
.label-pane.status-stranger { border-color: #ef4444; background: linear-gradient(180deg, #fff5f5 0%, #fee2e2 100%); box-shadow: 0 12px 28px rgba(239,68,68,0.15); }
.label-pane.status-family { border-color: #10b981; background: linear-gradient(180deg, #f0fff4 0%, #dcfce7 100%); box-shadow: 0 12px 28px rgba(16,185,129,0.15); }

/* 标签徽章 */
.label-badge { display: inline-block; padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 16px; letter-spacing: 0.5px; }
.badge-stranger { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.badge-family { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }

/* 警示动画 */
.label-pane.status-stranger .label-character-image { border-color: #ef4444; background: #fff5f5; animation: alertPulse 1.2s ease-in-out infinite, fadeIn 0.5s; }
.label-pane.status-family .label-character-image { border-color: #10b981; background: #f0fff4; }
 
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes alertPulse {
  0% { transform: scale(1); filter: drop-shadow(0 6px 12px rgba(239,68,68,0.15)); }
  50% { transform: scale(1.04); filter: drop-shadow(0 10px 18px rgba(239,68,68,0.25)); }
  100% { transform: scale(1); filter: drop-shadow(0 6px 12px rgba(239,68,68,0.15)); }
}
/* 弹窗样式 */
.hidden { display: none !important; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center; z-index: 999; animation: fadeIn 0.2s; }
.modal-content { width: 360px; max-width: 90vw; border-radius: 16px; background: #fff; box-shadow: 0 24px 48px rgba(0,0,0,0.18); overflow: hidden; border: 3px solid #fecaca; animation: popIn 0.25s ease-out; }
.modal-header { padding: 12px 16px; background: linear-gradient(90deg, #fb7185, #fca5a5); color: #fff; }
.modal-header h3 { margin: 0; font-size: 18px; }
.modal-body { padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.modal-figure { width: 160px; height: 160px; border-radius: 12px; background: #fff5f5; border: 2px dashed #fca5a5; padding: 8px; }
.modal-text { margin: 0; font-size: 16px; color: #7f1d1d; text-align: center; }
.modal-actions { padding: 12px 16px; display: flex; justify-content: center; }
.modal-close-btn { padding: 10px 16px; border-radius: 999px; border: 1px solid #fca5a5; background: #ffe4e6; color: #b91c1c; cursor: pointer; box-shadow: 0 6px 12px rgba(248, 113, 113, 0.18); }
.modal-close-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 16px rgba(248, 113, 113, 0.28); }

@keyframes popIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

footer { padding: 6px 12px; border-top: 1px solid #e5e7eb; background: #fff; font-size: 12px; color: #6b7280; line-height: 1.1; }
footer small { margin: 0; }
@media (max-width: 900px) { .container { grid-template-columns: 1fr; } }